import React, { useState } from "react";
import { NavBar, Space, ShareSheet, Button } from "react-vant";
import { useNavigate } from "react-router";
import { Replay } from "@react-vant/icons";
import { Empty } from "react-vant";
import shou from "./images/shou.jpg";
import styles from "./index.module.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [visible, setVisible] = useState(false);
  const options = [
    [
      { name: "微信", icon: "wechat" },
      { name: "朋友圈", icon: "wechat-moments" },
      { name: "QQ", icon: "qq" },
    ],
  ];
  return (
    <div className={styles.wo}>
      <NavBar title="我的商品收藏" onClickLeft={() => navigate("/my")} />
      {/* 分享 */}
      <Space gap={40}>
        <Replay className={styles.icon} onClick={() => setVisible(true)} />
      </Space>
      <ShareSheet
        visible={visible}
        options={options}
        title="--分享至--"
        onCancel={() => setVisible(false)}
        onSelect={(option, index) => {
          console.log("option", option);
          console.log("index", index);
          setVisible(false);
        }}
      />
      <Empty
        imageSize={100}
        image={<img src={shou} />}
        description="未收藏任何商品~"
      />
      <Button className={styles.btn}>去逛逛</Button>
    </div>
  );
};

export default Index;
